<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:ui="http://java.sun.com/jsf/facelets">
    <div class="message">

        <div class="avatar">
            <h:graphicImage url="#{message.user.smallGravatar}"/>
        </div>

        <div class="message-content">
            Username: #{message.user.name}<br/>
            Message: #{message.text}<br/>
            MessageID: #{message.id}<br/>
            MessageID from Bean: #{messageBean.messageId}<br/>
            Date:
            <h:outputText value="#{message.createdOn}">
                <f:convertDateTime type="date" dateStyle="medium"/>
            </h:outputText><br/>
            <h:form>
                <h:commandLink value="Delete" action="#{messageBean.delete}">
                    <f:setPropertyActionListener value="#{message.id}" target="#{messageBean.messageId}" />
                </h:commandLink>
            </h:form>
            <h:form>
                <h:commandLink value="Like this post" action="#{messageBean.like}" rendered="#{not message.isLikedBy(sessionScope.user)}">
                    <f:setPropertyActionListener value="#{message.id}" target="#{messageBean.messageId}" />
                </h:commandLink>
                <h:commandLink value="Unlike this post" action="#{messageBean.unlike}" rendered="#{message.isLikedBy(sessionScope.user)}">
                    <f:setPropertyActionListener value="#{message.id}" target="#{messageBean.messageId}" />
                </h:commandLink>
            </h:form>
            Liked by:
        <ol>
            <ui:repeat value="#{message.likes}" var="user">
                <li>#{user.name}</li>
            </ui:repeat>
        </ol>
        Comments:
            <h:form id="add-comment">
                <h:outputLabel for="comment" value="Add a comment"/>
                <h:inputTextarea value="#{commentBean.comment.text}" required="true">
                    <f:validateLength minimum="1" maximum="1000"/>
                </h:inputTextarea>
                <br />
                <h:commandButton value="Comment" action="#{commentBean.create}">
                    <f:param name="id" value="#{message.id}"/>
                    <f:ajax execute="@form" render="add-comment" />
                </h:commandButton>
                <h:panelGroup layout="block" id="comments">
                    <ui:repeat value="#{commentBean.getComments(message)}" var="comment">
                        <div>#{comment.text}</div>
                    </ui:repeat>
                </h:panelGroup>
            </h:form>
        </div>

    </div>
</ui:component>
